之前笔者分享了如何在Nuxt3中使用Element Plus UI，但那是PC端的UI组件库，不适用于做移动端页面。做移动端比较主流的UI库就是Vant UI了。接下来我们讲讲如何在Nuxt3中使用VantUI。
引入Vant UI先安装Vant
# 可以选择一个你喜欢的包管理器npm/yarn/pnpmpnpm install vant安装Nuxt官方专门针对引入vant 开发的模块
# 选择合适的包管理器，npm/yarn/pnpmpnpm i @vant/nuxt -D在nuxt.config.ts中配置modules参数export default defineNuxtConfig({ modules: [ '@vant/nuxt' ], vant: { /** Options */ }})至此，已经引入成功，且所有Vant 组件也都可以直接自动导入。示例：
button button lazy button记住：Vant组件已经可以被自动导入，而且也包括自动导入showDialog、showToast等方法，所以我们不用再手动书写import了。
移动端适配其实在Vant UI官方文档中有讲到如何做移动端的单位适配，需要借助postcss插件实现。其中，讲到了两种适配方式，一种是将px单位转换为vw。一种是将px单位转换为rem
vw单位适配方案rem单位适配方案那我们该使用哪种方案呢？其实笔者更倾向于使用rem方案，因为rem的兼容性更好，但是用rem的话，需要用到lib-flexble库去根据媒体查询动态的调整html的font-size，略显麻烦，所以，笔者打算将两者结合。
开发的时候书写px单位，然后通过插件将px单位换算成rem；将html的font-size设置为vw单位，这样根元素font-size就能自动根据视口宽度动态变化；具体的实现方式如下：
安装postcss-pxtorem
pnpm i -D postcss-pxtorem在nuxt.config.ts中配置postcss参数。笔者是以750px的尺寸做为设计稿参考值，定1rem=100px，这样换算方便。
export default defineNuxtConfig({ // ...other setting postcss: { plugins: {'postcss-pxtorem': { rootValue({ file }: any) {return file.indexOf('vant') !== -1 ? 37.5 : 100 }, propList: ['*'], exclude: /(node_module)/, selectorBlackList: ['html', '.rem-ignore']}} },})在app.vue或者其他全局的css文件中添加以下css。
html { font-size: 13.33333333vw; } @media (min-width: 560px) {html {font-size: 74.66666666666667px; } } body { font-size: 16PX; }13.33333333vw在750的设计稿上刚好为100px，所以刚好和第二步定的基准值一致。然后我将body的字体大小设为16px，是为了不让页面中内容在没有设置font-size时显的过大。而当页面宽度超过560px后，我们一般认为已经是宽屏设备了，采用一个统一的单位就可以了。至此，配置完成，开发时候，我们将设计稿宽度调为750后，就可以完全按照设计稿的尺寸书写样式了。比如我们写一个只占一半宽度的盒子:
.box { width: 375px; height: 375px; background-color: blue;}375px其实也就是标准稿的一半宽，也就是说这个div实际只会占据一半的页面，以下是在iPhoneXR的模拟设备上的效果。真实宽度是207px， 刚好是414px的一半。完美适配！
后记至此，Vant组件成功引入，移动端适配问题也解决。接下来就可以好好的撸业务代码咯。一般移动端页面的大多数访问场景都是在微信内。其中就涉及怎么实现微信授权登录，这对新手来说也是个麻烦事，笔者将在下一篇分享中再来探讨该问题。欢迎批评指正，或者与我交流探讨前端技术。源码尚未公开，联系我可私发。联系我：imwty2023（微信）